/** @format */

import { defineComponent, createApp, shallowRef } from 'vue'
import { ElDialog, ElButton } from 'element-plus'

const theComp = defineComponent({
  props: {
    visible: { type: Boolean },
    title: { type: String },
    content: { type: String },
    onConfirm: { type: Function, required: true },
    onCancel: { type: Function, required: true },
  },
  setup(props) {
    const theDialogVisible = shallowRef(true)
    const onPageCancel = () => {
      props.onCancel!()
      theDialogVisible.value = false
      // document.querySelector('#use-jsx-dialog-wrapper')?.remove()
    }
    const onPageConfirm = () => {
      props.onConfirm!()
      // document.querySelector('#use-jsx-dialog-wrapper')?.remove()
      theDialogVisible.value = false
    }
    // const onPageClose = () => {
    //     // 当关闭弹框的时候销毁组件
    //     document.querySelector('#use-jsx-dialog-wrapper')?.remove()
    // onClose = { onPageClose }
    // }

    return () => (
      <ElDialog
        v-if={props.visible}
        v-model={theDialogVisible}
        title={props.title}
        width="500"
        destroy-on-close>
        <span> {props.content}</span>
        <slot name="footer">
          <div class="dialog-footer">
            <ElButton onClick={() => onPageCancel()}>取消</ElButton>
            <ElButton type="primary" onClick={() => onPageConfirm()}>
              确定
            </ElButton>
          </div>
        </slot>
      </ElDialog>
    )
  },
})

export const onOpenOnlyTsxDialogDialog = (props: any) => {
  const theDiv = document.createElement('div')
  theDiv.setAttribute('id', 'use-jsx-dialog-wrapper') // 创建的时候创建一个Id  方便当关闭弹框的时候销毁
  document.body.appendChild(theDiv)
  return createApp(theComp, props).mount(theDiv)
}
